  * {
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  #box {
      width: 300px;
      height: 300px;
      background: #c3c3c3;
      border-radius: 10px;
  }
  
  #b_box {
      width: 300px;
      height: 300px;
      margin: 50px auto;
      border: 3px solid black;
      border-radius: 13px;
  }
  
  #but {
      display: block;
      width: 100px;
      height: 30px;
      outline: none;
      border: 2px solid black;
      border-radius: 5px;
      background: #f1f1f1;
      margin: 20px auto 0;
  }
  
  .a1 {
      width: 300px;
      height: 300px;
      box-sizing: border-box;
      padding: 50px;
      border: 1px solid black;
      border-radius: 10px;
      background: #eeeeee;
  }
  
  .a1>li:first-child {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: red;
      margin: 0 auto;
      margin-top: 50px;
  }
  
  .a2,
  .a3,
  .a4,
  .a5,
  .a6 {
      width: 300px;
      height: 300px;
      box-sizing: border-box;
      padding: 50px;
      border: 1px solid black;
      border-radius: 10px;
      background: #eeeeee;
      position: relative;
  }
  
  .a2 li:last-child {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 150px;
      left: 150px;
  }
  
  .a2 li:first-child {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 50px;
      left: 50px;
  }
  
  .a3 li:nth-child(2) {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 110px;
      left: 110px;
  }
  
  .a3 li:last-child {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      bottom: 50px;
      right: 50px;
  }
  
  .a3 li:first-child {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 50px;
      left: 50px;
  }
  
  .a4 li:first-child {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 50px;
      left: 50px;
  }
  
  .a4 li:last-child {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      background: red;
      position: absolute;
      bottom: 50px;
      right: 50px;
  }
  
  .a4 li:nth-child(3) {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 50px;
      right: 50px;
  }
  
  .a4 li:nth-child(2) {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      background: red;
      position: absolute;
      bottom: 50px;
      left: 50px;
  }
  
  .a5 li:last-child {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      bottom: 50px;
      right: 50px;
  }
  
  .a5 li:first-child {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 50px;
      left: 50px;
  }
  
  .a5 li:nth-child(3) {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 50px;
      right: 50px;
  }
  
  .a5 li:nth-child(2) {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      bottom: 50px;
      left: 50px;
  }
  
  .a5 li:nth-child(4) {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 110px;
      left: 110px;
  }
  
  .a6 li:last-child {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      bottom: 15px;
      right: 45px;
  }
  
  .a6 li:first-child {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 15px;
      left: 45px;
  }
  
  .a6 li:nth-child(2) {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      bottom: 15px;
      left: 45px;
  }
  
  .a6 li:nth-child(3) {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 15px;
      right: 45px;
  }
  
  .a6 li:nth-child(4) {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 110px;
      right: 45px;
  }
  
  .a6 li:nth-child(5) {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: red;
      position: absolute;
      top: 110px;
      left: 45px;
  }
